<div class="modal-header">
    <button type="button" class="close" ng-click="cancel()">&times;</button>
    <h4 class="modal-title">{{instance.name}} [{{instance.id}}] </h4>
</div>
<div class="modal-body">
    <div class="row ">
        <div class="col-xs-12 ">
            <span class="">Started</span> <span am-time-ago="instance.details.startTime"></span> by <strong>{{instance.details.startUserId}}</strong>
      <span ng-switch on="instance.details">
                <span ng-switch-when="instance.details.completed">
               currently <bold>completed</bold>
                </span>
                <span ng-switch-default>
                 currently  <bold>In progress</bold>
                </span>
            </span>

        </div>
    </div>

    <div class="row ">
        <h4 class="tableHeader">Tasks</h4>

        <div class="col-xs-12">
            <table class="table table-striped">
                <tr>
                    <th>Name</th>
                    <th>Assignee</th>
                    <th>DueDate</th>
                    <th>Created</th>
                    <th>Completed</th>
                </tr>
                <tr ng-repeat="task in instance.details.tasks">
                    <td>{{task.taskName}}</td>
                    <td>{{task.assignee}}</td>
                    <td am-time-ago="task.dueDate"></td>
                    <td am-time-ago="task.startTime"></td>
                    <td>{{task.completed}}</td>
                </tr>
            </table>
        </div>
    </div>

    <div class="row ">
        <h4 class="tableHeader">Variables</h4>

        <div class="col-xs-12">
            <table class="table table-striped">
                <tr>
                    <th>Name</th>
                    <th>Value</th>

                </tr>
                <tr ng-repeat="variable in instance.details.variables">
                    <td>{{variable.variableName}}</td>
                    <td>{{variable.variableValue}}</td>
                </tr>
            </table>
        </div>
    </div>

    <div class="row">

        <img ng-src="{{diagram}}" style="    width: 100%;    height: auto;"/>

    </div>
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-default" ng-click="cancel();">Close</button>
</div>

